import { View } from "@tarojs/components"
import { PureStandardProps } from "../consts"
import "./tab-control.scss"


interface TabControlProps extends PureStandardProps {
    selectedIndex: number,
    items: string[],
    onItemClick?: (number) => void
}

const TabControl = (props: TabControlProps) => {


    let onItemClick = (idx: number) => {
        if (idx != props.selectedIndex && props.onItemClick) {
            props.onItemClick(idx)
        }
    }

    return (
        <View className={ [props.className, "tab-control"].join(" ") }>
            <View className="tab-control-content">
                { 
                    props.items.map((item, index) => {
                        return (
                        <View 
                            className={["tab-control-item", index == props.selectedIndex ? "tab-control-item-selected" : ""].join(" ")} 
                            onClick={ () => onItemClick(index) }>

                            <View className="tab-control-item-text">
                            { item }
                            </View>

                            <View className="tab-control-indicator" />

                        </View>
                        )
                    })
                }
            </View>
        </View>
    )
}
export default TabControl